<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
	<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
    <head>
           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
	<head>
<![endif]>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Pie 2D: Smart Label</title>
        <style type="text/css">
        	@import "../../../../dojo/resources/dojo.css";
			@import "../../../../dijit/tests/css/dijitTests.css";
			@import "../../../../dijit/themes/claro/claro.css";
			@import "../../resources/Legend.css";
        </style>
        <script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, has:{'dojo-bidi': true}">
        </script>
        <script type="text/javascript">
 			dojo.require("dojo.parser");
			dojo.require("doh.runner");

			dojo.require("dojox.charting.Chart");
            dojo.require("dojox.charting.plot2d.Pie");
            dojo.require("dojox.charting.action2d.Highlight");
            dojo.require("dojox.charting.action2d.MoveSlice");
            dojo.require("dojox.charting.action2d.Tooltip");
			dojo.require("dojox.charting.themes.Tom");
            dojo.require("dojox.charting.widget.Legend");
			
            var pieChart = null;
			var legend = null;
            dojo.addOnLoad(function(){
                var dc = dojox.charting;
                pieChart = new dc.Chart("pieChart", {textDir:"rtl"});
                pieChart.setTheme(dc.themes.Tom).addPlot("default", {
                    type: "Pie",
                    font: "normal normal 10pt Tahoma",
					fontColor: "#ccc",
					labelWiring: "#ccc",
                    radius: 100,
					labelStyle: "columns",
					htmlLabels: true,
					startAngle: -10
                }).addSeries("Series A", [{
                    y: 12.1,
                    text: "The country is \u05e1\u05d9\u05df.",
                    tooltip: "1,210 \u05de\u05dc\u05d9\u05d5\u05df."
                },{
                    y: 9.52,
                    text: "\u05d4\u05de\u05d3\u05d9\u05e0\u05d4\u0020\u05d4\u05d9\u05d0 India.",
                    tooltip: "952 million."
                }, {
                    y: 2.66,
                    text: "\u05d0\u05e8\u05d4\u0022\u05d1.",
                    tooltip: "266 \u05de\u05dc\u05d9\u05d5\u05df."
                }, {
                    y: 2.06,
                    text: "Indonisia.",
                    tooltip: "206 million."
                }, {
                    y: 1.63,
                    text: "Brazil.",
                    tooltip: "163 million."
                },{
                    y: 1.48,
                    text: "Russian.",
                    tooltip: "148 million."
                },{
                    y: 1.29,
                    text: "Pakistan.",
                    tooltip: "129 million."
                },{
                    y: 1.25,
                    text: "Japan.",
                    tooltip: "125 million."
                },{
                    y: 1.23,
                    text: "Bangladesh.",
                    tooltip: "123 million."
                },{
                    y: 1.04,
                    text: "Nigeria.",
                    tooltip: "104 million."
                },{
                    y: 0.96,
                    text: "Mexico.",
                    tooltip: "96 million."
                },{
                    y: 0.84,
                    text: "Germany.",
                    tooltip: "84 million."
                },{
                    y: 0.74,
                    text: "Phillippines.",
                    tooltip: "74 million."
                },{
                    y: 0.74,
                    text: "Viet Nam.",
                    tooltip: "74 million."
                },{
                    y: 0.66,
                    text: "Iran.",
                    tooltip: "66 million."
                },{
                    y: 0.64,
                    text: "Egypt.",
                    tooltip: "64 million."
				}]);
				var anim_b = new dc.action2d.Highlight(pieChart, "default");
				var anim_c = new dc.action2d.Tooltip(pieChart, "default");
				pieChart.render();
				legend = new dojox.charting.widget.Legend({
					chart: pieChart,
					horizontal:false
				}, "legend");

				doh.register("parse", function(){
					dojo.parser.parse();
				});

				doh.register("test textDir", [
					{
						name: "Pies textDir",

						runTest: function(){
							doh.is("rtl", pieChart.textDir, "pieChart: internal labels");
							doh.is("rtl", legend.textDir, "legend: external labels");
						}
					}	
				]);		
				
				doh.run();
				
			});
			function refreshChart(){
				var newData = [];
				for(var i = 0; i < 16; i++){
					newData.push(Math.random()*10);
				}
				newData.sort(function(v1,v2){return v2 - v1});
				pieChart.updateSeries("Series A", newData);
				pieChart.render();
				legend.refresh();
			}
        </script>
    </head>
    <body class="claro">
    	<h1>Pie 2D: Smart Label</h1>
		<p>Example of Pie chart using smart label:</p>
        <div style="margin:20px">
            <div id="pieChart" style="width: 470px; height: 350px; float:left;">
            </div>
            <div id="legend">
            </div>
        </div>
		<button onclick="refreshChart()">Random Data Test</button>
    </body>
</html>
